import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {useRef, useState} from 'react';
import {Form, message, Space} from 'antd';
import {chatterList, messageReport, onlineReport} from "@/services/chatter";
import { DatePicker } from 'antd';


export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type GithubIssueItem = {
    rowID: string;
    queryDate: string;
    queryTime: number;
    state: string;
    chatterAccount: string;
    chatterNickName: string;
    onlineTotal: number;
    onlineStageRage?: string;
};
var actionRef = null;
function onChange(date, dateString) {
    console.log(date, dateString);
}

const columns: ProColumns<GithubIssueItem>[] = [

    {
        title: 'ID',
        dataIndex: 'rowID',
        hideInTable: true,
        hideInSearch: true,
    },
    {
        title: 'startDate',
        dataIndex: 'startDate',
        valueType: 'date',
        ellipsis: true,
        hideInTable: true
    },
    {
        title: 'endDate',
        dataIndex: 'endDate',
        valueType: 'date',
        ellipsis: true,
        hideInTable: true,
    },
    {
        title: 'Date',
        dataIndex: 'queryDate',
        ellipsis: true,
        hideInSearch: true,
        tip: 'Dt',
    },
    {
        title: 'Time Stage',
        dataIndex: 'queryTime',
        ellipsis: true,
        hideInSearch: true,
        tip: 'tm',
        render: (_, record) => (
            <Space>
                {record.queryTime-1 + "-" + record.queryTime}
            </Space>
        ),
    },
    {
        title: 'CID',
        dataIndex: 'chatterAccount',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
        hideInSearch: true


    },
    {
        title: 'NickName',
        dataIndex: 'chatterNickName',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
        hideInSearch: true

    },
    {
        title: 'Active Session',
        dataIndex: 'activeSessionTotal',
        hideInSearch: true,

    },
    {
        title: 'Received Message',
        dataIndex: 'receivedMessageNum',
        hideInSearch: true,

    },
    {
        title: 'Replied On Time Rage',
        dataIndex: 'replyOnTimeMessageNumRage',
        hideInSearch: true,

    }

];

export default (props) => {
    actionRef = useRef<ActionType>();
    const [totalCnt,setTotalCnt] = useState(10);
    const {chatterAccount} = props;

    return (
        <div>

            <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params) => {
                    params.chatterAccount = chatterAccount;
                    let response = await messageReport(params);
                    setTotalCnt(response.totalNum);

                    return {
                        data: response.replyReportDtoList == null ? [] : response.replyReportDtoList
                    };
                }}

                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                    onChange(value) {
                        console.log('value: ', value);
                    },
                }}
                rowKey="rowID"
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    pageSize: 30,
                    total:totalCnt,
                    onChange: (page) => console.log(page),
                }}



                dateFormatter="string"

            />
        </div>
    );
};